<template>
	<view class="pick-avatar">
		<!-- <view class="main-tabbar flex-box">
			<view :class="['tabbar-item',pageTabbarAc == item.id?'ac':'']" v-for="(item,index) in pageTabbarList"
				@click="changePageTabbarAc({item,index})" :key="item.id">
				<view class="text">{{item.text}}</view>
			</view>
		</view> -->
		<view class="page1" v-if="pageTabbarAc == 0">
			<view class="main-tabbar">
				<view :class="['tabbar-item-1', tabbarAc == item.id ? 'ac' : '']" v-for="(item, index) in tabbarList" @click="changeTabbarAc({ item, index })" :key="item.id">
					<view class="text">{{ item.text }}</view>
				</view>
			</view>
			<view class="main-tabbar" v-if="tabbarAc == 0">
				<view :class="['tabbar-item', tabbarAc2 == item.id ? 'ac' : '']" v-for="(item, index) in tabbarList2" @click="changeTabbarAc2({ item, index })" :key="item.id">
					<view class="text">{{ item.humanModeTypeName }}</view>
				</view>
			</view>
			<view class="main-content">
				<scroll-view class="scroll_view" scroll-y style="width: 100%" @scrolltolower="contentListScroll">
					<view class="contentList" v-if="tabbarAc == 0" ref="avatarContentList">
						<template v-if="yushe.length">
							<view :class="['contentItem', 'yushe-' + item.id]" v-for="(item, index) in yushe" @click="pickContentItem({ item, index })" :key="item.id">
								<image class="pic" :src="pageItem.ac == 1 ? item.speakerUrl : ''" mode="widthFix"></image>
								<view class="tag" v-if="item.isVip">Vip</view>
								<view class="bottom">
									<view class="name">{{ item.name }}</view>
								</view>
							</view>
						</template>
					</view>
					<view class="contentList-kong" v-if="tabbarAc == 0 && !yushe.length">
						<view class="text">暂无数据</view>
					</view>
					<view class="contentList" v-if="tabbarAc == 1" ref="avatarContentList">
						<template v-if="geren.length">
							<view class="contentItem" v-for="(item, index) in geren" @tap="pickContentItem({ item, index })" :key="item.id">
								<image class="pic" :src="pageItem.ac == 1 ? item.speakerUrl : ''" mode="widthFix"></image>
								<view class="tag" v-if="item.isVip">Vip</view>
								<view class="bottom">
									<view class="name">{{ item.name }}</view>
								</view>
							</view>
						</template>
					</view>
					<view class="contentList-kong" v-if="tabbarAc == 1 && !geren.length">
						<view class="text">暂无数据</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="page2" v-if="pageTabbarAc == 1">
			<view class="main-edit">
				<view class="btns">
					<!-- 	<view class="btn-item" @tap="del()">
						<image class="icon" :src="imgPath+'createAvatar/del.svg'" mode=""></image>
						<view class="text">删除</view>
					</view> -->
					<view class="btn-item" @tap="changeZIndex(1)">
						<image class="icon" :src="imgPath + 'createAvatar/up.svg'" mode=""></image>
						<view class="text">层级上移</view>
					</view>
					<view class="btn-item" @tap="changeZIndex(-1)">
						<image class="icon" :src="imgPath + 'createAvatar/up.svg'" mode="" style="transform: rotate(180deg)"></image>
						<view class="text">层级下移</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as api from "@/api/createVideo.js";
let timer = null;

import { tools } from "../../../../utils/util.js";
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		promiseRes: {
			type: Object | Function,
			default() {
				return null;
			}
		},
		currInd: {
			type: Number,
			default: -1
		},
		scene2: {
			type: Array,
			default() {
				return [];
			}
		},
		pageItem: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			imgPath: tools.imgPath,
			pageTabbarAc: 0,
			pageTabbarList: [],
			tabbarAc: 0,
			tabbarList: [],
			tabbarAc2: null,
			tabbarList2: [],
			contentList: [],
			yusheCurrent: 1,
			yusheSize: 12,
			yusheTotal: null,
			yushe: [],
			gerenCurrent: 1,
			gerenSize: 12,
			gerenTotal: null,
			geren: []
		};
	},
	async created() {
		this.initTabbarList();
		this.initPageTabbarList();
		let next = await this.initGetData();
		// [...this.yushe, ...this.geren].map(e => {
		// 	tools.loadImageWhenIdle(e.speakerUrl,img=>{
		// 		// console.log(e.speakerUrl,'加载完成！');
		// 		// console.dir(img);
		// 	});
		// });
		if (this.promiseRes) {
			this.promiseRes(true);
		}
	},
	methods: {
		// 滚动事件(做懒加载)
		contentListScroll(event) {
			const that = this;
			if (timer) clearTimeout(timer);
			timer = setTimeout(async () => {
				if (that.tabbarAc == 0) {
					if (this.yusheTotal === this.yushe.length) return;
					this.yusheCurrent++;
					await this.getAvatarData();
				} else {
					if (this.gerenTotal === this.geren.length) return;
					this.gerenCurrent++;
					await this.getAvatarData2();
				}
				clearTimeout(timer);
				timer = null;
			}, 300);
		},
		// 获取公共模特分类api
		async getAvatarClassificationData() {
			let classification = await api.getQmsUserHumanModelTwoType({
				humanModeType: 0
			});
			if (!classification) return;
			this.tabbarList2 = [
				{
					id: null,
					humanModeTypeName: "全部"
				},
				...classification.data
			];
			this.tabbarAc2 = this.tabbarList2[0].id;
			return true;
		},
		// 获取公共模特Api
		async getAvatarData(_id) {
			_id = ["Null", "Number", "String"].includes(tools.myTypeOf(_id)) ? _id : this.tabbarAc2;
			let sand = {
				id: _id,
				size: this.yusheSize,
				current: this.yusheCurrent
			};
			if (tools.myTypeOf(_id) == "'Null'") delete sand.id;
			if (_id === null) delete sand.id;
			let AvatarData = await api.getQmsUserHumanModelById(sand);
			if (!AvatarData?.data?.records) {
				this.yushe = [];
				return false;
			}
			this.yusheTotal = AvatarData.data.total;
			let yushe = AvatarData.data.records.map((e) => {
				// let img = new Image();
				// img.onload = () => {
				// 	console.log(e.speakerName, '加载完成！');
				// };
				return {
					...e,
					eleType: "avatar",
					picSrc: e.speakerUrl,
					name: e.speakerName,
					isVip: e.vipStatus == 1
				};
			});
			this.yushe = [...this.yushe, ...yushe];
			return true;
		},
		// 获取私有模特Api
		async getAvatarData2() {
			let sand = {
				size: this.gerenSize,
				current: this.gerenCurrent
			};
			let AvatarData = await api.getQmsUserHumanModelByMyself(sand);
			if (!AvatarData?.data?.records) {
				this.geren = [];
				return false;
			}
			this.gerenTotal = AvatarData.data.total;
			let geren = AvatarData.data.records.map((e) => {
				return {
					...e,
					eleType: "avatar",
					picSrc: e.speakerUrl,
					name: e.speakerName,
					isVip: e.vipStatus == 1
				};
			});
			this.geren = [...this.geren, ...geren];
			return true;
		},
		// 获取后端数据
		async initGetData() {
			let getAvatar = new Promise(async (next) => {
				let flag = await this.getAvatarClassificationData();
				if (!flag) return;
				let flag2 = await this.getAvatarData();
				if (!flag2) return;
				next(true);
			});
			await Promise.all([getAvatar]);
			return true;
		},
		//初始化pageTabbarList
		initPageTabbarList() {
			this.pageTabbarList = [
				{
					text: "选择数字人",
					id: 0
				},
				{
					text: "编辑数字人",
					id: 1
				}
			];
			if (this.pageItem) {
				// console.log('初始化pageTabbarList',this.pageItem);
				this.pageTabbarAc = this.pageItem.pageAc;
			}
		},
		//切换页面类型
		changePageTabbarAc({ item, index }) {
			// if (this.pageTabbarAc == item.id) return;
			this.pageTabbarAc = item.id;
		},
		//初始化tabbarList
		initTabbarList() {
			this.tabbarList = [
				{
					text: "公共数字人",
					id: 0
				},
				{
					text: "定制数字人",
					id: 1
				}
			];
		},
		//切换模特类型
		changeTabbarAc({ item, index }) {
			this.tabbarAc = item.id;

			if (this.tabbarAc == 1 ) {
				//获取私有模特
				if (this.gerenTotal === this.geren.length) return;
				this.gerenCurrent++;
				if (this.gerenTotal === null) {
					this.gerenCurrent = 1;
				}
				this.getAvatarData2();
			}
		},
		//切换模特子类型
		changeTabbarAc2({ item, index }) {
			this.tabbarAc2 = item.id;
			this.yusheCurrent = 1;
			this.yushe = [];
			this.yusheTotal = null;
			this.getAvatarData();
		},
		//选择模特
		pickContentItem({ item, index }) {
			item = item || this.yushe[0];
			index = index || 0;
			this.$emit("pickAvatar", {
				item,
				index
			});
		},
		// 删除
		del() {
			this.$emit("removeAvatar", this.currInd);
		},
		// 修改层级
		changeZIndex(num) {
			let index = this.scene2.findIndex((e) => e.eleType == "avatar");
			if (this.currInd == null || this.currInd < 0) {
				return tools.easyToast("请先选择数字人!");
				// if (index == -1) {
				// 	tools.easyToast('请先选择数字人!');
				// } else {
				// 	this.$emit('changeZIndex', this.currInd, num);
				// };
			} else {
				if (index != this.currInd) return tools.easyToast("请先选择数字人!");
				this.$emit("changeZIndex", this.currInd, num);
			}
		}
	},
	watch: {
		["pageItem.ac"](val) {
			if (val != 1) return;
			this.changePageTabbarAc({
				item: {
					id: this.pageItem.pageAc
				}
			});
		}
	}
};
</script>

<style lang="scss">
.pick-avatar {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;

	.page1 {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	.main-tabbar {
		display: -webkit-box;
		overflow: hidden;
		overflow-x: auto;

		&.flex-box {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.tabbar-item {
			padding: 0.5vw 1vw;
			color: rgba(255, 255, 255, 0.36);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 100vw;
			background: rgba(255, 255, 255, 0.125);
			margin: 0vw 5vw 2vw 0vw;
			min-width: 10vw;

			&.ac {
				border: 2px solid rgba(0, 153, 127, 1);
				.text {
					color: rgba(0, 153, 127, 1);
					font-weight: 700;
				}
			}

			.text {
				font-size: 24rpx;
				font-weight: 400;
			}
		}
		.tabbar-item-1 {
			padding: 2vw;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;

			&.ac {
				.text {
					color: rgba(0, 153, 127, 1);
					border-bottom: 2px solid rgba(243, 173, 51, 1);
				}
			}

			.text {
				padding-bottom: 2vw;
			}
		}
	}

	.main-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		.scroll_view {
			width: 100%;
			height: 68vh;
			display: flex;
			overflow: hidden;
		}
		.contentList {
			flex: 1;
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 2vw;
			text-align: center;
			overflow: hidden;
			.contentItem {
				width: 100%;
				overflow: hidden;
				margin-right: 3vw;
				margin-bottom: 1.2vw;
				border-radius: 2vw;
				background: rgba(28, 43, 46, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.pic {
					width: 100%;
				}

				.tag {
					position: absolute;
					top: 0vw;
					left: 0vw;
					border-radius: 3vw 0vw 3vw 0vw;
					background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(22, 24, 30, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 1vw 1.5vw;
				}

				.bottom {
					position: absolute;
					bottom: 0vw;
					width: 100%;
					height: 6vw;
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgba(22, 24, 30, 0.7);
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(204, 204, 204, 1);
				}
			}
		}

		.contentList-kong {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.page2 {
		.main-edit {
			.btns {
				display: flex;
				justify-content: flex-start;

				.btn-item {
					border: 1px solid #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					min-width: 20vw;
					margin-right: 2vw;
					border-radius: 2vw;
					padding: 1vw;

					.icon {
						width: 5vw;
						height: 5vw;
						display: block;
					}
				}
			}
		}
	}
}
</style>
